//  左侧固定 右侧自适应  两栏布局实现
<template>
  <div class="root-container   layout-container">
    <div>
      <h3>
        方式1:
        <em>display : flex</em>
      </h3>
      <pre>
          <code>
              .parnet{
                  display:flex;
              }
              
              .left-box{
                  flex-basis:200px; //  建议
                  // or width:200px;   
              }

              .right-box{
                  flex:1;
              }
          </code>
      </pre>
    </div>
    <div class="way full-width way_1">
      <div class="left-box">left-box</div>
      <div class="right-box">right-box</div>
    </div>
    <div>
      <h3>
        方式2.
        <em>position定位 + calc() 计算属性</em>
      </h3>
      <pre>
            <code>
                .parent {
                    position: relative;
                    .left-box {
                        width: 200px;
                    }
                    .right-box {
                        width: calc(100% - 200px);
                        height: 50px;
                        position: absolute;
                        left: 200px;
                        top: 0;
                        background-color: burlywood;
                    }
                }
            </code>
        </pre>
    </div>
    <div class="way full-width way_2">
      <div class="left-box">left-box</div>
      <div class="right-box">right-box</div>
    </div>

    <div>
      <h3>
        方式3.
        <em>float + margin-left</em>
      </h3>
      <pre>
            <code>
                .parent {
                    .left-box {
                        float: left;
                        width: 200px;
                    }
                    .right-box {
                        margin-left: 200px;
                        height:100%;
                    }
                }
            </code>
        </pre>
    </div>

    <div class="way full-width way_3">
      <div class="left-box">left-box</div>
      <div class="right-box">right-box</div>
    </div>

    <div>
      <h3>
        方式4.
        <em>float</em>
      </h3>
      <pre>
            <code>
               .parent{
                    .left-box{
                        width: 200px;
                        float: left;
                    }
                    .right-box{
                        float: right;
                        height: 100%;
                        width:  calc(100% - 200px);
                    }
                }
            </code>
        </pre>
    </div>

    <div class="way full-width way_4">
      <div class="left-box">left-box</div>
      <div class="right-box">right-box</div>
    </div>








    <div>
      <h3>
        方式5.
        <em>float + BFC (overflow)</em>
      </h3>
      <pre>
            <code>
               .parent{
                    .left-box{
                        width: 200px;
                        float: left;
                    }
                    .right-box{
                        overflow: auto;
                        height: 100%;
                    }
                }
            </code>
        </pre>
    </div>

    <div class="way full-width way_5">
      <div class="left-box">left-box</div>
      <div class="right-box">right-box</div>
    </div>









  </div>
</template>
<script>
export default {
  name: "",
  components: {},
  props: [],
  data() {
    return {
      params: ""
    };
  },
  created() {},
  mounted() {},
  methods: {}
};
</script>
<style lang='scss' scoped>
.layout-container {
    width:600px;
  em {
    color: #c92c2c;
    background-color: #f9f2f4;
  }
  pre {
    background-color: #f8f8f8;
    margin-bottom: 10px;
  }
}
.full-width {
  border: 1px solid #b2b6b6;
  margin-bottom: 20px;
}

.way {
  height: 50px;
  .left-box {
    height: 100%;
    background-color: aquamarine;
  }
  .right-box {
    background-color: burlywood;
  }
}

// 方式1
.way_1 {
  display: flex;
  .left-box {
    flex-basis: 200px;
  }
  .right-box {
    flex: 1;
  }
}

// 方式2
.way_2 {
  position: relative;
  .left-box {
    width: 200px;
  }
  .right-box {
    width: calc(100% - 200px);
    height: 50px;
    position: absolute;
    left: 200px;
    top: 0;
    background-color: burlywood;
  }
}

// 方式3
.way_3 {
  .left-box {
    float: left;
    width: 200px;
  }
  .right-box {
    margin-left: 200px;
    height: 100%;
  }
}

.way_4 {
  .left-box {
    width: 200px;
    float: left;
  }
  .right-box {
    float: right;
    height: 100%;
    width: calc(100% - 200px);
  }
}


.way_5{
    .left-box{
        width: 200px;
        float: left;
    }
    .right-box{
        overflow: auto;
        height: 100%;
    }
}
</style>